<script setup>
import { ref,onMounted } from 'vue';
import { HomeFilled, Setting, InfoFilled, TurnOff } from '@element-plus/icons-vue'
import { get } from '../js/http';
import { useRouter } from 'vue-router'
import {useDark, useToggle} from '@vueuse/core'

const theme = ref(localStorage.getItem('vueuse-color-scheme') == 'dark')
const router = useRouter();
const isDark = useDark();

const toggleDark = useToggle(isDark)

const name = localStorage.getItem('routing-name');
const refreshKey = ref(new Date().getTime())
const logout = () => {
    get('/auth/logout').then(res=>{
        localStorage.clear();
        router.push('/login')
    })
}

const goPage = (name) => {
    if(name == 'home'){
        router.push('/')
    }
    if(name == 'toolSetting'){
        router.push('/setting')
    }
    if(name == 'help'){
        router.push('/help')
    }
}

onMounted(() => {
})
</script>
<template>
    <div class="home">
        <header>
            <el-menu class="menu" mode="horizontal" @select="goPage" default-active="home">
                <el-menu-item index="home">
                    <template #title>
                        <el-icon><home-filled></home-filled></el-icon><span>首页</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="toolSetting">
                    <template #title>
                        <el-icon>
                            <setting></setting>
                        </el-icon><span>基础站型</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="help">
                    <template #title>
                        <el-icon><info-filled></info-filled></el-icon><span>使用说明</span>
                    </template>
                </el-menu-item>
            </el-menu>
            <div class="userarea">
                <el-switch style="margin-right: 20px; --el-switch-on-color: var(--el-color-info); --el-switch-off-color: #333;" active-text="明亮模式" size="large" width="large" inactive-text="暗黑模式" :inline-prompt="true" v-model="theme" @change="toggleDark();refreshKey = new Date().getTime();"></el-switch>
                <el-popover placement="bottom-start" :width="200" trigger="hover">
                    <div class="list">
                        <div class="item" @click="logout">退出</div>
                    </div>
                    <template #reference>
                        <el-avatar :size="35" style="cursor: pointer; font-weight: bold;">{{ name.substring(0,
                            1).toUpperCase()
                        }}</el-avatar>
                    </template>
                </el-popover>
            </div>
        </header>
        <div class="content">
            <router-view :key="refreshKey" />
        </div>
    </div>
</template>
<style scoped>
header {
    max-height: 55px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--el-menu-border-color);
}
.list{
    width: 100%;
}
.item{
    padding: 5px 10px;
    cursor: pointer;
}
.item:hover{
    font-weight: bold;
}

.userarea {
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 20px;
    height: 55px;
    border-bottom: 1px solid var(--el-menu-border-color);
}

.menu {
    height: 55px;
    width: calc(100% - 400px);
}
</style>